<template>
    <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="商品列表" name="first">
            <div class="common-layout">
                <el-container>
                    <el-header style="height: 50px;width: 100%;">
                        <el-button @click="jumpInsert">发布预约</el-button>
                        <el-button @click="updateStatues(1)">批量上架</el-button>
                        <el-button @click="updateStatues(0)">批量下架</el-button>
                        <el-button @click="del">删除</el-button>

                        <el-select v-model="Product.commoditystatus" placeholder="全部状态" @change="getlist()"
                            style="width: 100px;margin-left: 850px;">
                            <el-option label="已上架" :value="true" />
                            <el-option label="已下架" :value="false" />
                            <!-- <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" /> -->
                        </el-select>
                        <el-input v-model="Product.productname" style="width: 150px" placeholder="输入商品名称" />
                    </el-header>
                    <el-main>
                        <el-table ref="tableRef" :data="tableData" stripe style="width: 100%">
                            <el-table-column type="selection" width="55" />
                            <el-table-column prop="reservationName" label="预约名称" />
                            <el-table-column prop="reservationNumber" label="实际总预约量" />
                            <el-table-column prop="sort" label="排序" />
                            <el-table-column prop="commodityStatus" label="商品状态">
                                <template #default="{ row }">
                                    <el-switch v-model="row.commodityStatus" class="ml-2"
                                        style="--el-switch-on-color: #13ce66; " />
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" min-width="120">
                                <template #default="{row}">
                                    <el-button link type="primary" size="small" @click="jumpUpdate(row)" >
                                        编辑
                                    </el-button>
                                    <el-button link type="primary" size="small">复制</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div>
                            <el-pagination v-model:current-page="Product.index" v-model:page-size="Product.size"
                                :background="true" layout="total, prev, pager, next, jumper"
                                :total="Product.totalcount" />
                        </div>
                    </el-main>
                </el-container>
            </div>
        </el-tab-pane>
        <el-tab-pane label="预约列表" name="second"></el-tab-pane>
        <el-tab-pane label="聚合商品" name="third"></el-tab-pane>
        <el-tab-pane label="商品设置" name="fourth"></el-tab-pane>
        <el-tab-pane label="商品标签" name="fourth"></el-tab-pane>
    </el-tabs>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { ElMessage, ElMessageBox, ElTable } from 'element-plus'
import { getListReservation, DeleteReservation, UpdateReservationstate } from '@/api/index'
import router from '@/router'
const tableRef = ref<InstanceType<typeof ElTable>>()
const tableData = ref([])
//查询条件
const Product = ref({
    productname: "",
    commoditystatus: null,
    ids: [],
    index: 1,
    size: 10,
    totalpage: 1,
    totalcount: 1
});
//分页监听
watch(Product.value, () => {
    getlist()
})
//查询显示
const getlist = () => {

    console.log(Product.value)
    getListReservation(Product.value).then((res: any) => {
        console.log(res)
        tableData.value = res.data.list
        Product.value.totalcount = res.data.totalCount
    })
}
onMounted(() => {
    getlist()
})
//删除
const del = () => {
    ElMessageBox.confirm(
        '确定要删除吗？',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            // 获取选中的行数据
            const selectedRows = tableRef.value?.getSelectionRows()
            if (!selectedRows || selectedRows.length === 0) {
                alert('请选择要删除的商品')
                return
            }
            // 提取要删除的商品ID
            Product.value.ids = selectedRows.map((row: any) => row.id) // 假设数据中有id字段


            DeleteReservation(Product.value.ids.toString()).then((res: any) => {
                if (res.code == 200) {
                    ElMessage.success("删除成功");
                    getlist()
                }
                else {
                    ElMessage.error("删除失败")
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除取消',
            })
        })
}
//批量上下架
const updateStatues = (value: number) => {
    // 获取选中的行数据
    const selectedRows = tableRef.value?.getSelectionRows()
    if (!selectedRows || selectedRows.length === 0) {
        alert('请选择要更新的商品')
        return
    }
    // 提取要更新的商品ID
    Product.value.ids = selectedRows.map((row: any) => row.id) // 假设数据中有id字段

    UpdateReservationstate(Product.value.ids, value).then(res => {
        if (res.code == 200) {
            ElMessage.success("更新成功")
            getlist()
        }
        else {
            ElMessage.error("更新失败")
        }
    })
}
//跳转页面
const jumpInsert = () => {
    router.push('/InsertReservation')
}
//跳转修改页面
const jumpUpdate = (value: any) => {
  router.push({
    name: 'UpdateReservation',
    query: {
      id: value.id
    }
  });
};
const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
</script>

<style>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
</style>